import { colorOptions, columns, diabledMap } from "./store";
import styles from "./index.module.less";
import { fetchList, handleAction } from ".";
import IMToolTip from "@/components/common/ToolTip";
export const tablePage = renderTablePage();
export const tableData = ref<any>([]);
export const tableLoading = ref(false);
const defineBodyCellMap = ({ value, text, index, column, record }) => {
  const renderIsDisabled = () => (
    <div>
      <i class={colorOptions[record.is_disabled]}>
        {selectDictLabel(diabledMap, value)}
      </i>
    </div>
  );

  const renderPayCapacity = () => (
    <div>
      <a-space size={8}>
        {record.is_support_pay === 1 ? (
          <i class={styles.Flex}>{$t("tripartite19")}</i>
        ) : null}
        {record.is_support_withdraw === 1 ? (
          <i class={styles.Flex}>{$t("tripartite18")}</i>
        ) : null}
      </a-space>
    </div>
  );

  const renderSupportPayPassageways = () => {
    const tmpArray = value?.split(",");
    return (
      <div>
        {tmpArray.length ? (
          <div class={styles.Flex_cell}>
            <i class={[styles.Dashed, "fs10"]}>{tmpArray[0]}</i>
            <im-tooltip
              defaultValue={
                <i class={[styles.Dashed, "fs10"]}>{tmpArray.length - 1}</i>
              }
              title={
                <div class={styles.title_wrap}>
                  {tmpArray?.slice(1)?.map((item: any) => <i>{item}</i>) ??
                    null}
                </div>
              }
            />
          </div>
        ) : null}
      </div>
    );
  };

  const renderAction = () => (
    <div>
      {withDirectivePower({
        vNode: (
          <div class="s-table-body_cell">
            {renderUpdate.call({
              record,
              handleAction,
              identify: "tripartiteApi.update",
            })}
            <a-divider type="vertical" />
          </div>
        ),
        bindingValue: "tripartiteApi.update",
      })}
      {withDirectivePower({
        vNode: renderDisable.call({
          record: { ...record, status: record.is_disabled },
          handleAction,
          identify: "tripartiteApi.updateStatus",
        }),
        bindingValue: "tripartiteApi.updateStatus",
      })}
    </div>
  );
  return new Map([
    [{ key: "index" }, renderIndex],
    [{ key: "is_disabled" }, renderIsDisabled],
    [{ key: "comment" }, renderToolTip.bind({ value, length: 6 })],
    [{ key: "payCapacity" }, renderPayCapacity],
    [{ key: "support_pay_passageways" }, renderSupportPayPassageways],
    [{ key: "action" }, renderAction],
  ]);
};
const handleRenderBodyCellTask = (props) => {
  const array = [...defineBodyCellMap(props)].filter(
    ([object]) => object.key === props.column.key
  );
  const _this = { tablePage, ...props };
  return array.map(([, value]) => value.call(_this));
};

export const tableConfig = () => {
  const defineTable = {
    pagination: tablePage,
    loading: tableLoading,
    on: {
      change(paging: { current: number; pageSize: number }) {
        tablePage.current = paging.current;
        tablePage.pageSize = paging.pageSize;
        fetchList();
      },
    },
    columns,
    dataSource: tableData,
    tableSlot: {
      bodyCell: (props) => handleRenderBodyCellTask(props),
      headerCell: ({ title, column }: any) => {
        if (column.key === "payCapacity") {
          return (
            <>
              <div class="s-table-header_cell" style="column-gap: 5px">
                <i>{title}</i>
                <tips-cell content={[$t("tripartite37"), $t("tripartite38")]} />
              </div>
            </>
          );
        }
        return <div class="s-table-header_cell">{title}</div>;
      },
    },
  };
  return defineTable;
};
